<!--分类监管-->
<template>
   <Modal @click.self="$emit('hidden')">
    <div class="polygon">
      <!-- 点击关闭弹窗 -->
      <p class="polygonImgClose"><img @click.self="$emit('hidden')" src="@/assets/img/comprehensive/left/52.png"></p>
      <!-- 从父组件中传递 title 到此组件并设定为列表标题 -->
      <p class="polygon_title font_s36 textC colorF">
          <img src="@/assets/img/comprehensive/left/50.png" alt="">
      </p>
      <div class="modelL">
        <div class="feng textC positionR">
          风险
          <img class="fengimg" src="@/assets/img/comprehensive/left/56.png" alt="" srcset="">
        </div>
        <ul class="flex JustifyContentC" style="padding: 2rem;">
          <li class="yuntitle textC" style="margin-right: 5rem;">运营管理</li>
          <li class="yuntitle textC">消防安全</li>
        </ul>
        <ul class="flex JustifyContentC" style="padding: 2rem;">
          <li class="yuntitle textC" style="margin-right: 5rem;">设备设施</li>
          <li class="yuntitle textC">烟花爆竹管控</li>
        </ul>
        <div class="hengG"></div>
        <div class="feng2 textC positionR">
          动态
          <img class="fengimg" src="@/assets/img/comprehensive/left/62.png" alt="" srcset="">
        </div>
        <div class="bar" style="margin-left:5rem">
          日常监管
        </div>
        <div class="bar" style="margin-left:7rem">
          专项监管
        </div>
        <div class="bar" style="margin-left:9rem">
          联合监管
        </div>
      </div>
      <div class="modelM">

      </div>
      <div class="modelR">
        <div class="feng3 textC positionR">
          信用
          <img class="fengimg" src="@/assets/img/comprehensive/left/61.png" alt="" srcset="">
        </div>
        <div class="wudie positionR">
          <p class="p1">证照<br>合同</p>
          <p class="p2">内容<br>管理</p>
          <p class="p3">信访<br>投诉</p>
          <p class="p4">诚信<br>经营</p>
          <p class="p5">加分项</p>
        </div>
        <div style="overflow: hidden;">
          <div class="hengGR"></div>
        </div>
        <div style="overflow: hidden;">
          <div class="feng4 textC positionR">
            智能
            <img class="fengimg" src="@/assets/img/comprehensive/left/63.png" alt="" srcset="">
          </div>
        </div>
        <div class="bar2" style="margin-right:5rem">
          探头人流计数设备
        </div>
        <div class="bar2" style="margin-right:7rem">
          舆情预警
        </div>
        <div class="bar2" style="margin-right:9rem">
          6个双推送
        </div>
      </div>
    </div>
  </Modal>
</template>
<script>
import Modal from '@/components/Modal'
export default {
  name: 'ClassifyModal',
  components: {
    Modal
  },
  props: {
    title: {
      type: String,
      default: ''
    }
  }
}
</script>
<style lang="scss" scoped>
.polygon{
  width: 90%;
  height: 90%;
  position: absolute;
  top: 5%;
  left: 5%;
  background: url(../../../assets/img/comprehensive/left/51.png) no-repeat;
  background-size: 100% 100%;
  .polygonImgClose {
    position: absolute;
    top:1.5rem;
    right: 2%;
    img{
      width: 3rem;
    }
  }
  .polygon_title{
    line-height: 7rem;
    img{
      width: 25rem;
    }
  }
  .modelL{
    position: absolute;
    left: 4rem;
    top: 15vh;
    z-index: 1;
    width: 37rem;
    height: 42rem;
    background: url(../../../assets/img/comprehensive/left/53.png) no-repeat;
    background-size: 100% 100%;
    .yuntitle{
      width: 8rem;
      height: 1.75rem;
      line-height: 1.75rem;
      font-size: 0.875rem;
      font-weight: normal;
      color: #00E4FF;
      background: url(../../../assets/img/comprehensive/left/57.png) no-repeat;
      background-size: 100% 100%;
    }
  }
  .feng,.feng2,.feng3,.feng4{
      line-height: 8rem;
      width:8.5rem ;
      height: 8rem;
      font-size: 0.9375rem;

      font-weight: bold;
      .fengimg{
        position: absolute;
        left: 0;
        top: 0;
        width:8.5rem ;
        height: 8rem;

      }
    }
    .feng{
      margin: 0 auto;
      margin-top: 1rem;
      color: #00E4FF;
      .fengimg{
        animation: rotation2 3s linear infinite;
      }
    }
    .feng2{
      margin: 0 6rem;
      color: #D9C40E;
      .fengimg{
        animation: rotation2 3s linear infinite;
      }
    }
    .feng3{
      margin: 0 auto;
      margin-top: 1rem;
      color:#00ECCD;
      .fengimg{
        animation: rotation1 3s linear infinite;
      }
    }
    .feng4{
      float: right;
      margin: 0 6rem;
      color: #A8FF00;
      .fengimg{
        animation: rotation1 3s linear infinite;
      }
    }
    .hengG{
      margin-left: 1rem;
      margin-bottom: 1rem;
      width: 11rem;
      height: 0.125rem;
      background: linear-gradient(to right, rgba(0, 108, 187, 0.99),rgba(0, 108, 187, 0.1));
    }
    .hengGR{
      margin: 0.5rem auto;
      margin-right: 1rem;
      float: right;
      width: 11rem;
      height: 0.125rem;
      background: linear-gradient(to left, rgba(0, 108, 187, 0.99),rgba(0, 108, 187, 0.1));
    }
    .bar,.bar2{
      width: 15rem;
      height: 2.5rem;
      line-height:2.5rem;
      font-weight: normal;
      font-size: 0.9rem;
      text-align: center;
      color: #00E4FF;
    }
    .bar{
      margin: 1rem;
      background: url(../../../assets/img/comprehensive/left/58.png) no-repeat;
      background-size: 100% 100%;
    }
    .bar2{
      margin: 0.8rem;
      float: right;
      background: url(../../../assets/img/comprehensive/left/59.png) no-repeat;
      background-size: 100% 100%;
    }
  .modelM{
    position: absolute;
    right:25vw;
    top:15vh;
    width: 40vw;
    height: 35vw;
    background: url(../../../assets/img/comprehensive/left/54.png) no-repeat;
    background-size: 100% 100%;
  }
  .modelR{
    position: absolute;
    right: 3rem;
    top: 15vh;
    width: 37rem;
    height: 42rem;
    background: url(../../../assets/img/comprehensive/left/55.png) no-repeat;
    background-size: 100% 100%;
    .wudie{
      margin: 0.5rem auto;
      width: 14.75rem;
      height: 10.25rem;
      background: url(../../../assets/img/comprehensive/left/60.png) no-repeat;
      background-size: 100% 100%;
      font-size: 0.9rem;
      font-weight: bold;
      color: #00E4FF;
      .p1{
        position: absolute;
        top: 1rem;
        left: 1.6rem;
      }
      .p2{
        position: absolute;
        top:1rem;
        right: 1.7rem;
      }
      .p3{
        position: absolute;
        top: 3.8rem;
        right: 6.5rem;
      }
      .p4{
        position: absolute;
        bottom: 1rem;
        left: 1.6rem;
      }
      .p5{
        position: absolute;
        bottom: 1.8rem;
        right: 1.2rem;
      }
    }
  }
}
@-webkit-keyframes rotation1{
  from {-webkit-transform: rotate(360deg);}
  to {-webkit-transform: rotate(0deg);}
}
@-webkit-keyframes rotation2{
  from {-webkit-transform: rotate(0deg);}
  to {-webkit-transform: rotate(360deg);}
}
</style>
